<template>
  <div class="">
    <div class="headera">
      <van-row class="header">
        <van-col span="3" class="left"><van-icon name="arrow-left" /></van-col>
        <van-col span="21"
          ><van-search
            v-model="value"
            show-action
            :label="city"
            placeholder="请输入搜索关键词"
            @search="onSearch"
            @click="ChoseCity"
          >
            <template #action>
              <div @click="onSearch" class="righticon">
                <van-icon name="guide-o" />
              </div>
            </template> </van-search
        ></van-col>
      </van-row>
    </div>
    <div class="center">
      <van-tabs v-model="active">
        <van-tab title="标签 1">
          <van-picker
            title="标题"
            :columns="columns"
            @confirm="onConfirm"
            @cancel="onCancel"
            @change="onChange"
        /></van-tab>
        <van-tab title="标签 2"
          ><van-picker
            title="标题"
            :columns="columns2"
            @confirm="onConfirm"
            @cancel="onCancel"
            @change="onChange"
        /></van-tab>
        <van-tab title="标签 3"
          ><van-picker
            title="标题"
            :columns="columns3"
            @confirm="onConfirm"
            @cancel="onCancel"
            @change="onChange"
        /></van-tab>
        <van-tab title="标签 4"></van-tab>
      </van-tabs>
    </div>
    <div class="content">
      <ul v-if="info">
        <li
          v-for="(item, index) in info"
          :key="index"
          @click="
            checkInfo(
              item,
              index,
              '?cityId=AREA%7Cdbf46d32-7e76-1196&stat=1&end=10'
            )
          "
        >
          <div class="left">
            <img src="@/assets/imgaaa.jpg" alt="" />
          </div>
          <div class="right">
            <h3>111</h3>
            <p>{{ item.desc }}</p>
            <div class="tab"><i>近地铁</i></div>

            <h4>{{ item.price }} <span>元/月</span></h4>
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>
<script>
import {
  getCityInfo,
  getCityValue,
  getcityarea,
  getCondition
} from '@/api/axiosrequest'

import { Toast } from 'vant'
export default {
  name: 'FindHouse',
  data () {
    return {
      table1n: 110100,
      value: '',
      active: 2,
      cityvalue: '',
      city: '上海',
      info: null,
      flag: false,
      columns: [
        // 第一列
        {
          values: ['区域', '地铁'],
          defaultIndex: 3
        },
        {
          values: [],
          defaultIndex: 2
        },
        // 第二列
        {
          values: [],
          defaultIndex: 1
        }
      ],
      columns2: ['整租', '合租', '不限'],
      columns3: [
        '租金',
        '1000及以下',
        '1000-2000',
        '2000-3000',
        '3000-4000',
        '4000-5000',
        '5000-6000',
        '6000-7000',
        '7000以上'
      ],
      area: null,
      citys: null,
      name: {
        cityId: null,
        area: null,
        subway: null,
        rentType: null,
        price: null,
        more: null,
        roomType: null,
        oriented: null,
        characteristic: null,
        floor: null,
        start: null,
        end: null
      }
    }
  },
  methods: {
    onConfirm (value, index) {
      Toast(`当前值：${value}, 当前索引：${index}`)
    },
    async onChange (picker, value, index) {
      if (value[0] === '区域') {
        const str = this.area.map(item => item.label)
        // console.log(str)
        this.columns[1].values = str
        const secondcity = this.area.filter(item => item.label === value[1])
        const { body } = await getcityarea(secondcity[0].value)
        const str2 = body.map(item => item.label)
        this.columns[2].values = str2
        // console.log(this.area)
        // console.log(value[0])
        // console.log(secondcity)
        // console.log(str)
        // console.log(value[2])
        this.name.cityId = value[1]
        this.name.area = value[2]
        const data = await getCityInfo(this.name)
        // console.log(data)
        this.info = data.body.list
      } else if (value[0] === '地铁') {
        const dataCondition = await getCondition(this.cityvalue)
        console.log(dataCondition.body.subway.children)
        const strsub = dataCondition.body.subway.children.map(
          item => item.label
        )
        this.columns[1].values = strsub
        this.columns[2].values = []
        console.log(strsub)
      }
    },
    onCancel () {
      Toast('取消')
    },
    checkInfo () {
      this.$router.push({
        path: '/detail'
      })
    },
    onSearch () {},
    onLoad () {},
    ChoseCity () {
      this.$router.push({
        path: 'chosecity'
      })
    },
    async getarea () {
      const { body } = await getcityarea(this.cityvalue)
      this.area = body
    }
  },
  async created () {
    this.city = this.$route.query.city
    const params = {
      cityID: this.city
    }
    const data = await getCityInfo(params)
    const { body } = await getCityValue(this.city)
    this.cityvalue = body.value
    this.getarea()
    this.info = data.body.list
  }
}
</script>
<style lang="less" scoped>
.headera {
  height: 60px;
  .header {
    height: 50px;
    line-height: 50px;
    .left {
      padding-left: 20px;
      font-size: 25px;
    }
    .righticon {
      font-size: 20px;
    }
  }
}

.center {
  height: 40px;
}
.content {
  ul {
    li {
      display: flex;
      height: 150px;
      border-bottom: 1px solid #ccc;
      .left {
        width: 30%;
        // background-color: aqua ;
        padding: 20px;
        img {
          width: 100%;
          height: 100%;
        }
      }
      .right {
        padding-left: 20px;
        h3 {
          margin-bottom: 10px;
        }
        h4 {
          margin-top: 5px;
          color: red;
          span {
            font-size: 8px;
          }
        }
        p {
          color: #ccc;
        }
        .tab {
          height: 20px;
          width: 40px;
          background-color: aqua;
          margin-bottom: 5px;
          text-align: center;
          line-height: 20px;
          font-size: 5px;
        }
      }
    }
  }
}
</style>
